;(function () {

    const activeDate = new Date('2021-2-6 17:12:00');//活动结束时间
    $.fn.extend({
        /**
         * 鼠标移入改变区域图片
         */
        opacityShow() {
            $(this).on('mouseenter', 'li', function () {
                //改变样式
                $(this).addClass('imgCurrent').siblings().removeClass('imgCurrent');
                //改变小图片的路径
                let src = $(this).children().attr('src')
                $('.smallImg img').attr('src', src);
            })
        },

        /**
         * 放大镜效果
         */
        magnifier() {
            //获取比例尺
            const scaleR = parseInt($('.bigArea').css('width')) / parseInt($('.smallArea').css('width'));

            //显示与隐藏
            this.on('mouseenter', function () {
                $('.smallArea').show();
                $('.bigArea').show();
            }).on('mouseleave', function () {
                $('.smallArea').hide();
                $('.bigArea').hide();
            })

            this.on('mousemove', function (e) {
                //设置大图片大小
                $('.bigImg').css({
                    width: Math.floor($('.smallImg').outerWidth() * scaleR) + "px",
                    height: Math.floor($('.smallImg').outerHeight() * scaleR) + "px"
                });
                //设置小区域的位置变化
                let left = e.pageX - $('.smallImg').offset().left - $('.smallArea').outerWidth() / 2;
                let top = e.pageY - $('.smallImg').offset().top - $('.smallArea').outerHeight() / 2;
                //左右边界判断
                if (left >= $('.smallImg').outerWidth() - $('.smallArea').outerWidth()) {
                    left = $('.smallImg').outerWidth() - $('.smallArea').outerWidth();
                } else if (left <= 0) {
                    left = 0;
                }
                //上下边界判断
                if (top >= $('.smallImg').outerHeight() - $('.smallArea').outerHeight()) {
                    top = $('.smallImg').outerHeight() - $('.smallArea').outerHeight();
                } else if (top <= 0) {
                    top = 0;
                }

                //小区域移动
                $('.smallArea').css({
                    left, top
                });

                //大图片移动
                $('.bigImg').css({
                    left: -(left * scaleR) + "px",
                    top: -(top * scaleR) + "px"
                })
            })
        },

        /**
         * 图片列表移动效果
         */
        moveImgList() {
            const self = this;
            const LiW = $(self).find('li').outerWidth();
            const LiMR = parseInt($(self).find('li').css('marginRight'));
            $(self).parent().next().on('click', _.throttle(function () {
                let itemL = LiW + LiMR;
                if (parseInt(getComputedStyle(self[0]).right) < -LiMR) {
                    $(self).animate({
                        left: $(self).position().left - itemL
                    }, 300);
                }
            }, 400));
            $(self).parent().prev().on('click', _.throttle(function () {
                let itemL = LiW + LiMR;
                if (parseInt(getComputedStyle(self[0]).left) < 0) {
                    $(self).animate({
                        left: $(self).position().left + itemL
                    }, 300);
                }
            }, 400));
        },

        /**
         * 商品选中效果
         */
        chooseGoods() {
            this.on('click', function () {
                $(this).find('a').addClass('current')
                    .parents('li').siblings().children('a').removeClass('current');
            });
        },

        /**
         * 商品数量增减
         */
        addReduce() {
            //获取白条的原价
            const iniPrice = [];
            [...$('.selectBlank em')].forEach(el => {
                iniPrice.push(parseFloat(el.innerText));
            })

            this.click(function () {
                let value = parseInt($('.addNum input').val())
                $(this).attr('class') === 'add' ? value++ : value--;
                if (value <= 1 && $(this).hasClass('reduce')) {
                    value = 1;
                    $(this).addClass('disabled');
                } else {
                    $(this).siblings().removeClass('disabled');
                }
                $('.addNum input').val(value);
            })

            //输入框改变事件
            $(this).parents('.addReduce').prev().on('change', function () {
                let sumCount = Math.abs(parseInt($(this).val()));
                if (sumCount === 0) {
                    sumCount = 1;
                }
                $(this).val(sumCount);
            })
        },

        /**
         * 推荐栏轮播图
         */
        recommendPlay() {
            let index = 0;
            const self = this;
            const Step = self.width();

            //克隆第一个轮播图元素
            $(self).find('.content-ul').append($('.content-ul li').eq(0).clone());

            function autoPlay() {
                index++;
                if (index > 2) {
                    index = 0;
                    $(self).find('.content-ul')
                        .animate({left: -3 * Step}, 300, function () {
                            $(self).find('.content-ul').css('left', 0);
                        });
                } else {
                    $(self).find('.content-ul')
                        .animate({left: -index * Step}, 300);
                }
                //改变按钮样式
                $(self).find('.control a').eq(index).addClass('active')
                    .siblings().removeClass('active')
            }

            let timer = setInterval(autoPlay, 2000);
            //移入按钮事件
            $(self).on('mouseenter', function () {
                clearInterval(timer);
            }).on('mouseleave', function () {
                timer = setInterval(autoPlay, 2000);
            });

            //控制按钮移入事件
            $(self).find('.control a').on('mouseenter', function () {
                index = $(this).index() - 1;
                autoPlay();
            })
        },

        /**
         * 吸顶效果
         */
        fixedTop() {
            const self = this;
            const iniHeight = $(self).find('.pin-wrapper').outerHeight();
            $(document).on('scroll', function () {
                //获取不可见区域的高度
                let domTop = $(document).scrollTop();
                //获取主体内容距离浏览器顶部的距离
                let disTop = $(self).offset().top - domTop;

                if (disTop < 0) {
                    $(self).find('.pin-wrapper').addClass('fixTop');
                    $(self).find('.tabTitle').addClass('fixTop');
                    $(self).css('paddingTop', iniHeight);
                } else {
                    $(self).find('.pin-wrapper').removeClass('fixTop');
                    $(self).find('.tabTitle').removeClass('fixTop');
                    $(self).css('paddingTop', "");
                }
            })
        },

        /**
         * 活动倒计时效果
         */
        calTime() {
            //显示两位数的方法
            function showTwo(num) {
                num = num >= 0 && num <= 9 ? `0${num}` : num;
                return num;
            }

            //刷新事件
            const refresh = () => {
                let now = new Date();//获取当前时间
                let disDate = (activeDate - now) / 1000;//获取事件差
                if (disDate <= 0) {//如果活动过期,删除内容
                    $('.discountTime')[0].remove();
                    return;
                }
                let day = Math.floor(disDate / 3600 / 24);
                let hour = Math.floor(disDate % (3600 * 24) / 3600);
                let minute = Math.floor(disDate % 3600 / 60);
                let second = Math.floor(disDate % 3600 % 60);
                this.children(".day").html(showTwo(day))
                    .parent().children('.hour').html(showTwo(hour))
                    .parent().children('.minute').html(showTwo(minute))
                    .parent().children('.second').html(showTwo(second));

            }

            refresh();//初始化
            //开启定时器
            setInterval(refresh, 1000)
        },

        /**
         * tab栏切换
         */
        tabChange() {
            //克隆添加一些内容
            $(this).find('.tabTitle li').on('click', function () {
                const index = $(this).index();
                if ($(this).parent().css('position') === 'fixed') {
                    $(document).scrollTop($(this).parents('.mainBtmWrap').offset().top);
                }
                $(this).addClass('current').siblings().removeClass('current');
                $(".tabContent .tabLiItem").eq(index).show().siblings().hide();
            });
        },

        /**
         * 获取商品数据
         */
        getGoodsInfo() {
            const self = this;
            //获取后台数据
            //截取url上的参数
            let getGId = location.href.substring(location.href.indexOf('?') + 1, location.href.length);
            $.ajax({
                url: "./goods/see",
                type: 'get',
                data: {gId: getGId}
            }).then(function (res) {
                if (res.status === 200) {
                    let goodsInfo = res.data[0];
                    //设置前台元素数据
                    $(self).find('.goodsName h1').text(goodsInfo.g_name);
                    $(self).find('.summary-price b').text(goodsInfo.g_price);
                    //设置图片内容
                    let strHtml = ``;
                    Array.from(JSON.parse(goodsInfo.g_imgs)).forEach(function (el, index) {
                        if (index === 0) {
                            strHtml += `<li class="imgCurrent"><img src="${el}" alt=""></li>`
                        } else {
                            strHtml += `<li class=""><img src="${el}" alt=""></li>`
                        }
                    });
                    $(self).find('.ulImg').html(strHtml);
                    $(self).find('.smallImg>img').attr('src', Array.from(JSON.parse(goodsInfo.g_imgs))[0]);
                    $(self).find('.bigImg').attr('src', Array.from(JSON.parse(goodsInfo.g_imgs))[0]);
                }
            })
        }
    });
})()

$(function () {
    //放大镜效果
    $('.goods-pics .smallImg').magnifier();

    //鼠标移入改变区域图片
    $('.ulImg').opacityShow();

    //图片列表移动效果
    $('.ulImg').moveImgList();

    //商品选中效果
    $('.selectGoods ul li').chooseGoods();

    //增加或减少商品
    $('.addReduce a').addReduce();

    //推荐栏轮播图
    $('.recommend-content').recommendPlay();

    //吸顶效果
    $('.mainBtmWrap').fixedTop();

    //活动倒计时效果
    $('.dateTime').calTime();

    //tab栏切换
    $('.tabAll').tabChange();

    //获取商品数据
    $('.goods-detail').getGoodsInfo();
})